<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<!-- Loading Bootstrap -->
<link href="./Public/Admin/Flat/dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="./Public/Admin/Flat/dist/css/flat-ui.css" rel="stylesheet">
<link href="./Public/Admin/Flat/docs/assets/css/demo.css" rel="stylesheet">
<link rel="shortcut icon" href="./Public/Admin/Flat/img/favicon.ico">
	 <!-- 需要载入的文件 -->
    <script type="text/javascript" src="Public/uploadify/jquery-1.8.2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="Public/uploadify/jquery.uploadify.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Public/uploadify/uploadify.css">
    	
	<!--载入百度编辑器-->
	<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/ueditor.all.min.js"> </script>
	<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
    	
<script type="text/javascript">
	$(function(){
		//表单提交事件
		$('select[name=cate_cid]').change(function(){		
			//获得选中的option的tid
			var tid = $('option:selected').attr('tid');					
			//获取tid
			var i='';
			i='<input type="hidden" name="type_tid" value="'+tid+'"/>'; //隐藏域
			$("#form").append(i);
			
			$.ajax({
				//请求方式
				type:"post",
				//请求地址
				url:"{{U('Goods/getAttr')}}",
				//发送数据
				data:{t : tid},
				//指定服务器返回的数据类型
				dataType:'json',
				//服务器返回数据
				success:function(phpData){
					if(tid == 0){
//						alert('不能选择顶级分类！')
						$('#tip').html('*不能选择顶级分类*');
					}else{
						$('#tip').html("<span style='color:green;'>*分类选择成功*<span/>");
					}
					console.log(phpData);
					var attr = '';
					var spec = '';
					$.each(phpData, function(k,v) {
						//若为属性
						if(v.class == 0){
							attr += '<tr>';	
							attr += '<td width="30%">'+v.trname+'</td>';		
							attr += '<td>';		
							attr += '<select name="attr['+v.trid+']">';			
							attr += '<option value="">请选择</option>';	
									$.each(v.value, function(kk,vv){
										attr += '<option value="'+vv+'">'+vv+'</option>';
									});			
							attr += '</select>';			
							attr += '</td></tr>';			
						}else{
						//若为规格
							spec += '<tr>';	
							spec += '<td>'+v.trname+'</td>';
							spec += '<td>';	
							spec += '<select name="spec[value]['+v.trid+'][]">';//与属性																				
							spec += '<option value="">请选择</option>';
									$.each(v.value, function(kk,vv) {    
										spec += '<option value="'+vv+'">'+vv+'</option>';                                                          
									});
							spec += '</select>';
							spec += '<td>';
							spec += '附加价格：<input type="text" name="spec[add_price]['+v.trid+'][]"/></td>'
							spec += '<td>';
							spec += '<a href="javascript:;" class="btn btn-primary addSpec">添加规格</a>';
							spec += '</td></tr>';
						}
					});
					$('#attr').html(attr);
					$('#spec').html(spec);								
				}			
			});					
		});				
		//点击添加规格
		$('.addSpec').live('click',function(){
			//找到当前的父级的tr
			var trObj = $(this).parents('tr');
			//克隆一个
			var tr = trObj.clone();
			tr.find('.addSpec').html('删除规格').removeClass('btn-primary addSpec').addClass ('btn-info removeSpec');
			//再插入到当前父级的下面
			trObj.after(tr);
		});
		//删除规格
		$('.removeSpec').live('click',function(){
			$(this).parents('tr').remove();
		});
		
		//商品详情
		$('.contentbtn').click(function(){
			$(".content").fadeIn(500);
		});
		//商品详情
		$('.servicebtn').click(function(){
			$(".service").fadeIn(500);
		});

	});

</script>
    	
</head>
<style type="text/css">
	.btn{margin-bottom: 10px;}
	#uploadList ul li,#uploadList_p ul li{list-style: none;}
	#uploadList ul li a,#uploadList_p ul li a{display: block;}
	select{width: 197px;}
	#tip{color: red;font-size: 12px;margin-left: 7px;}
</style>
<body>		
<form action="" method='post' id="form">
<!--<fieldset>-->
	<legend>添加商品</legend>
	<p class="btn btn-primary">基本信息</p>		
	<table class='table table-bordered table-hover'>
		<tbody>					
			<tr>
				<td width="30%">所属分类</td>
				<td>
					<select name="cate_cid">
						<option value="0">-请选择-</option>
							{{foreach from="$cateData" value="$v"}}
							<option value="{{$v['cid']}}" tid={{$v['type_tid']}}>{{$v['_name']}}</option>		
							{{endforeach}}							
					</select>
					<span id="tip"></span>
				</td>
			</tr>
			<tr>
				<td>所属品牌</td>
				<td>
					<select name="brand_bid">
						<option value="0">-请选择-</option>
							{{foreach from="$brandData" value="$v"}}	
							<option value="{{$v['bid']}}">{{$v['bname']}}</option>
							{{endforeach}}
					</select>
				</td>
			</tr>
			<tr>
				<td>商品名称</td>
				<td>
					<input type="text" name='gname'/>
				</td>
			</tr>
			<tr>
				<td>商品货号</td>
				<td>
					<input type="text" name='gnum'/>
				</td>
			</tr>
			<tr>
				<td>单位</td>
				<td>
					<!--<input type="text" name='nuit' value='件'/>-->
					<select name="unit">
						<option value="">-请选择-</option>
						<option value="件">件</option>
						<option value="个">个</option>
						<option value="支">支</option>
						<option value="条">条</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>市价场</td>
				<td>
					<input type="text" name='marketPrice'/>
				</td>
			</tr>
			<tr>
				<td>商城价</td>
				<td>
					<input type="text" name='mallPrice'/>
				</td>
			</tr>
			<tr>
				<td>库存</td>
				<td>
					<input type="text" name='stockNum'/>
				</td>
			</tr>
			<tr>
				<td>点击次数</td>
				<td>
					<input type="text" name='times'/>
				</td>
			</tr>
		</tbody>
	</table>

	<p class="btn btn-primary">商品属性</p>
	<table class="table table-bordered table-hover" id='attr' class="info">
		
	</table>
	<p class="btn btn-primary">商品规格</p>
	<table class="table table-bordered table-hover" id='spec'>
		
	</table>

	<p class="btn btn-primary">列表图</p>	
	<table class='table table-bordered'>
		<tr>
			<td width="30%">
				<!--上传插件-->
			    <input id="f" type="file" multiple="true">
			    <!--<span>类型: *.jpg,*.png 大小: 2000KB</span>-->
			    <script type="text/javascript">
			        $(function() {
			            $('#f').uploadify({
			                'formData'     : {//POST数据
			                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
			                },
			                'fileTypeExts' : '*.jpg;*.png',
			                'swf'      : '{{__PUBLIC__}}/uploadify/uploadify.swf',
			                'uploader' : '{{U('upload')}}',//指定服务器上传的方法
			                'buttonText':'选择文件',
			                'fileSizeLimit' : '2000KB',
			                'uploadLimit' : 1,//上传文件数
			                'width':105,
			                'height':45,
			                'successTimeout':10,//等待服务器响应时间
			                'removeTimeout' : 0.2,//成功显示时间
			                'onUploadSuccess' : function(file, data, response) {
			                    //把php返回的数据转为json
			                    data=$.parseJSON(data);
			                    //获得图片地址
			                    var imageUrl = data.url;
			                    var li="<li>";
			                    li += "<img src='"+imageUrl+"'/>";
			                    li += "<input type='hidden' name='pic' value='"+data.path+"' id ='hidePic0' /><a href='javascript:;' id='self-close'>X</a>";
			                    li += "</li>";
			                    $("#uploadList ul").prepend(li);
			                }
			            });					
						//关闭图片
			            var i = 1;
			            $('#self-close').live('click',function(){
			            	//图片异步删除	  抓去当前图片路径
			            	var path = $("#hidePic0").attr("value");
			            	$.ajax({	
			            		type:'post',
			            		url:"{{U('Goods/delImg')}}",
			            		data:{path:path},
			            	});
			                $(this).parent('li').remove();
			                i++;
			                $('#f').uploadify('settings','uploadLimit',i);
			            })
			        });
			          
				</script>
			</td>
			<td style="text-align: bottom;">
				 <div id="uploadList">
			        <ul>
			        
			        </ul>
			    </div>
			</td>
		</tr>				
	</table>
	
	<p class="btn btn-primary">商品图册</p>	
	<table class='table table-bordered'>
		<tr>
			<td width="30%">
				<!--上传插件-->
			    <input id="gf" type="file" multiple="true">
			    <!--<span>类型: *.jpg,*.png 大小: 2000KB</span>-->
			    
			    <script type="text/javascript">
			        $(function() {
			        	//先定义  用于图片的id
						var imgId = 0;
			            $('#gf').uploadify({		            								
			                'formData'     : {//POST数据
			                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
			                },
			                'fileTypeExts' : '*.jpg;*.png',
			                'swf'      : '{{__PUBLIC__}}/uploadify/uploadify.swf',
			                'uploader' : '{{U('upload')}}',//指定服务器上传的方法
			                'buttonText':'选择文件',
			                'fileSizeLimit' : '2000KB',
			                'uploadLimit' : 5,//上传文件数
			                'width':105,
			                'height':45,
			                'successTimeout':10,//等待服务器响应时间
			                'removeTimeout' : 0.2,//成功显示时间
			                'onUploadSuccess' : function(file, data, response) {
			                    //把php返回的数据转为json
			                    data=$.parseJSON(data);
			                    //获得图片地址  
			                    var imageUrl = data.url;
			                    var li="<li>";
			                    li += "<img src='"+imageUrl+"'/>";
			                    li += "<input type='hidden' name='picture[]' value='"+data.path+"' class='hidePic1"+imgId+"'/><a href='javascript:;' class='self-close"+imgId+"'>X</a>";
			                    li += "</li>";
			                    $("#uploadList_p ul").prepend(li);
			                    //每次图片id加1
			                    ++imgId;			                    
			                }
			            });					
						//关闭图片
			            var i = 1;
						<?php $imgPathId = [
							0=>'0',
							1=>'1',
							2=>'2',
							3=>'3',
							4=>'4'
						]?>
			            {{foreach from="$imgPathId" value="$v"}}
			            $('.self-close{{$v}}').live('click',function(){	   
			            	//图	片异步删除	       抓去当前图片路径
							//两个图片上传框架id 应不同 
			            	var path = $('.hidePic1{{$v}}').attr("value");
							alert(path);
			            	$.ajax({
			            		type:'post',
			            		url:"{{U('Goods/delImg')}}",
			            		data:{path:path},
			            	});			            				            	
			                $(this).parent('li').remove();
			                i++;
			                $('#gf').uploadify('settings','uploadLimit',i);
			            })
			            {{endforeach}}			          
			        });
			    </script>
			    
			</td>
			<td style="text-align: bottom;" id="uploadList_p">
				 <div id="uploadList_p">
			        <ul>

			        </ul>
			    </div>
			</td>
		</tr>				
	</table>

	<table class='table'>
		<tr class="next_show">
			<th class="btn btn-primary contentbtn" >商品详细</th>
		</tr>
		<tr class="info content" style="display: none;">					
			<!--调用百度编辑器-->
			<script id="editor" type="text/plain" style="width:100%;height:200px;" name="content"></script>
		    <script>
		        var ue = UE.getEditor('editor');
	    	</script>	    					
		</tr>
	</table>

	<table class='table'>
		<tr class="next_show">
			<th class="btn btn-primary servicebtn" >售后服务</th>
		</tr>
		<tr class="info service" style="display: none;">					
			<!--调用百度编辑器-->
			<script id="editor_service" type="text/plain" style="width:100%;height:150px;" name="service"></script>
		    <script>
		        var ue = UE.getEditor('editor_service');
	    	</script>	    					
		</tr>
	</table>
	<input style="margin-bottom: -10px;" type="submit" value="确认添加" class="btn btn-primary btn-block btn-large" />
<!--</fieldset>-->
</form>

</body>
</html>
